<template>
  <div class="container">
    <mt-header title="管家推荐">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="steward-box">
      <div class="steward-item" v-for="item in list" :key="item.id">
        <div class="pic">
          <img :src="item.img" alt="">
        </div>
        <div class="steward-right">
          <p><span class="user">{{item.user}}</span><span>{{item.position}}</span></p>
          <p>擅长:{{item.good}}</p>
          <img src="../../images/icon_right.png" alt="">
        </div>
      </div>
    </div>

    <div class="next">
      <button>换一批</button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [{
            id: 1,
            img: '../../images/8.jpg',
            user: '名字1',
            position: '妇科疾病',
            good: '擅长疾病'
          },
          {
            id: 2,
            img: '../../images/18.png',
            user: '名字2',
            position: '小儿科',
            good: '擅长疾病11111'
          },
          {
            id: 3,
            img: '../../images/56st.png',
            user: '名字3',
            position: '各种病',
            good: '擅长疾病222222222'
          },
        ]

      };
    }
  };
</script>
<style scoped>
  .mint-header {
    background: #7fffaa;
    font-size: 20px;
    height: 50px;
    border-bottom: 1px solid #fff;
  }

  .pic img {
    width: 50px;
    height: 50px;
  }

  .steward-box {
    padding: 5px;
  }

  .steward-item {
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 0 10px #ccc;
    margin-bottom: 10px;
  }

  .steward-right {
    width: 100%;
    position: relative;
    margin-left: 10px;
  }

  .steward-right img {
    position: absolute;
    right: 0;
    top: 20px;
    width: 12px;
    height: 20px;
  }

  .steward-right .user {
    font-weight: 600px;
  }

  .next {
    margin-top: 100px;
    padding: 0 20px;
  }

  .next button {
    width: 100%;
    height: 50px;
    color: pink;
    border-radius: 5px;
  }
</style>